import React, { useContext } from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { Button } from '@/shared/ui/Button';
import { ProfileModalItem } from '@/widgets/Header/Header';
import cn from 'classnames';
import { useRouter } from 'next/router';

import cs from './ActionCard.module.scss';

type Props = {
  data: ProfileModalItem[];
  className: string;
  activeTab: string;
};

export const ActionCard = ({ data, className, activeTab }: Props) => {
  const router = useRouter();
  const { openModal } = useContext(ModalContext);
  return (
    <>
      {data.map((item) => (
        <Button
          className={cn(className, { [cs.active]: activeTab === item.id })}
          data-testid={`button-redirect-${item.id}`}
          key={item.id}
          onClick={() => {
            if (item.id === 'logout') {
              openModal(Modals.ConfirmExitModal);
            } else {
              router.push(item.id);
            }
          }}
        >
          {item.Logo}
          {item.Component}
        </Button>
      ))}
    </>
  );
};
